<template>
  <view class="exam-item">
    <view class="header">
      <view class="title u-line-1">{{ datas.paper.title }}</view>
      <view class="tag">{{ datas.product_type_id == 8 ? '公开考试' : '套卷' }}</view>
      <view v-if="datas.product_type_id == 8" class="btn" @click="onExam(datas, 9)">
        <u-icon name="fankui" custom-prefix="edu-icon" size="32" :color="globPrimaryColor"></u-icon>
      </view>
      <view v-else class="btn" @click="handleRollupChange">
        <u-icon
          size="28"
          color="#B7BAC1"
          :class="{ 'icon-active': show }"
          class="icon"
          name="arrow-down"
        ></u-icon>
      </view>
    </view>

    <!-- 公开考试 -->
    <view class="public" v-if="datas.product_type_id == 8">
      <view class="text"
        >作答次数：{{ datas.answer_count }}/{{ datas.config.exam_number || '无限制' }}</view
      >
      <view v-if="datas.config.exam_stime" class="time text">
        考试时间：{{ getFormateDate(datas.config.exam_stime, datas.config.exam_etime) }}
      </view>
      <view v-else class="time text">永久有效</view>
    </view>
    <!-- 套卷考试 -->
    <template v-else>
      <view class="rollup" v-show="show">
        <view class="rollup-item" v-for="(item, index) in list" :key="index">
          <view class="header">
            <view class="title u-line-2">{{ item.paper.title }}</view>
            <view class="btn" @click="onExam(item, 10)">
              <u-icon
                name="fankui"
                custom-prefix="edu-icon"
                size="32"
                :color="globPrimaryColor"
              ></u-icon>
            </view>
          </view>
          <view class="text"
            >作答次数：{{ item.answer_count }}/{{ item.config.exam_number || '无限制' }}</view
          >
          <view v-if="item.config.exam_stime" class="text">
            考试时间：{{ getFormateDate(item.config.exam_stime, item.config.exam_etime) }}
          </view>
          <view v-else class="text">永久有效</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    datas: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      show: false,
      list: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    onExam(item, type) {
      this.$emit('click', item, type)
    },
    handleRollupChange() {
      this.show = !this.show
      if (this.list.length == 0) {
        this.getRollupList()
      }
    },
    // 获取套卷列表
    getRollupList() {
      this.$edu.api.getUserExamRecordRollup(this.datas.paper.id).then((res) => {
        const { data } = res
        this.list = data
      })
    },
    getFormateDate(stime, etime) {
      if (String(stime).length == 10) stime *= 1000
      if (String(etime).length == 10) etime *= 1000
      const now = new Date() // 当前

      const sdate = new Date(stime)
      const edate = new Date(etime)

      // 同一年
      const isSameYear = (timestamp1, timestamp2) => {
        return timestamp1.getFullYear() === timestamp2.getFullYear()
      }

      // 同一天
      const isSameDay = (timestamp1, timestamp2) => {
        return (
          timestamp1.getFullYear() === timestamp2.getFullYear() &&
          timestamp1.getMonth() === timestamp2.getMonth() &&
          timestamp1.getDate() === timestamp2.getDate()
        )
      }

      const cFormat = 'yyyy-mm-dd hh:MM'
      const mFormat = 'mm-dd hh:MM'
      const hFormat = 'hh:MM'

      // 今年
      if (isSameYear(now, sdate)) {
        if (isSameDay(sdate, edate)) {
          return this.$u.date(stime, mFormat) + '～' + this.$u.date(edate, hFormat)
        } else {
          return this.$u.date(stime, mFormat) + '～' + this.$u.date(edate, mFormat)
        }
      } else {
        if (isSameDay(sdate, edate)) {
          return this.$u.date(stime, cFormat) + '～' + this.$u.date(edate, hFormat)
        } else {
          return this.$u.date(stime, cFormat) + '～' + this.$u.date(edate, mFormat)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.exam-item {
  margin-top: 20rpx;
  padding: 30rpx 24rpx;
  background: #ffffff;
  border-radius: 8rpx;
  .header {
    display: flex;
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: $edu-main-color;
      line-height: 40rpx;
      margin-right: 10rpx;
    }
    .tag {
      margin-right: 10rpx;
      padding: 5rpx 8rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: $edu-content-color;
      line-height: 30rpx;
      background: #f1f1f1;
      border-radius: 6rpx;
      white-space: nowrap;
    }
    .btn {
      margin-left: auto;
    }
    .icon {
      transition: all 0.3s;
    }
    .icon-active {
      transform: rotate(180deg);
      transform-origin: center center;
    }
  }
  .text {
    margin-top: 12rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: $edu-tips-color;
    line-height: 33rpx;
  }
  .public {
    margin-top: 24rpx;
  }
  .rollup {
    margin-top: 16rpx;
    .rollup-item {
      padding: 24rpx 0;
    }
    .rollup-item + .rollup-item {
      border-top: 1px solid #f7f7f7;
    }
    .rollup-item:last-child {
      padding-bottom: 0;
    }
  }
}
</style>
